@import shared.Pojo.VarInfoDataKind
@import shared.Pojo.BiomDataKind
@()(implicit request: RequestHeader, messages: Messages)
<div class="tab-pane fade in active" id="metData">

	<div id="example" style="display: none"></div>

	<div class="table-responsive">

		<div >
			<button type="button" class="btn btn-primary idsButton" disabled >
				<i class="fa fa-trash"></i>&nbsp;@messages("delete")
			</button>
			<button type="button" class="btn btn-primary" id="deleteButton" onclick="DataManage.addShow">
				<i class="fa fa-cloud-upload"></i>&nbsp;@messages("upload")
			</button>
		</div>

		<div style="display: none;
			margin-bottom: 10px">@{
			messages("filteringAndSort")
		}：
			<span id="filterCondition">

				<span class="eachFilterCondition" style="display: none">
					<span >Gene ID</span>
					<span style="color: red">LIKE</span>
					AT
					<sup style="" class="mySup" onclick="SampleManage.removeCondition">
						<i class="fa fa-times-circle"></i>
					</sup>
				</span>

			</span>
		</div>

		<div style="display: none;
			margin-bottom: 10px">@{
			messages("sortingConditions")
		}：
			<span id="sortCondition">

				<span class="eachFilterCondition" style="display: block">
					<span >Gene ID ,</span>
					<span style="color: red">@messages("ascending")</span>
					<sup style="" class="mySup" onclick="SampleManage.removeCondition">
						<i class="fa fa-times-circle"></i>
					</sup>
				</span>

			</span>
		</div>

		<table class="display table table-bordered" id="table" data-pagination="true"
		data-page-list="[10, 25, 50, 100, all]" >
			<thead>

				<tr class="myTr">

				</tr>

			</thead>
		</table>

		<div id="allFilterContent">

		</div>

		<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 1000px">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<h4 class="modal-title">
							<i class="fa fa-cloud-upload"></i>
							<span id="lblAddTitle" style="font-weight: bold">@messages("upload")</span>
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
							<i class="fa fa-remove"></i>
						</button>
					</div>
					<form class="form-horizontal" id="form" action="" data-toggle="validator" enctype="multipart/form-data">
						<div class="modal-body">
							<div class="row-fluid">

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("matrixFile"):</label>
									<div class="col-sm-6">
										<ul class="nav nav-tabs" id="inputKind">

											<li class="active" id="expressLi">
												<a href="#hand" data-toggle="tab" >
												@messages("UsingTheSampleFile") </a>
											</li>

											<li class="">
												<a href="#file" data-toggle="tab" >
												@messages("file") </a>
											</li>

										</ul>
										<div class="tab-content" style="margin-top: 20px">

											<div class="tab-pane fade in active" id="hand">

												<textarea class="form-control monospace" name="fileContent" rows="8"
												style="word-wrap: normal;
													overflow-x: auto;
													white-space: pre;" readonly></textarea>

												<div style="margin-top: 5px">
													<p>@messages("defaultFileNameInfo", "met_data.txt")</p>
													<p>@messages("note2Info", "met_data_1.txt")</p>
												</div>

											</div>

											<div class="tab-pane " id="file">

												<input type="file" class="file control-label" name="file"
												data-show-preview="false" accept=".csv,.xlsx,.txt"
												data-show-upload="false" >
												<span class="help-block">
													<a href="#" class="myMatrixFileIntroShow"><em id="egGeneId">
													@messages("FileFormatDescription")</em></a>
												</span>

												<div style="margin-top: 5px">
													<p>@messages("firstLineInfo")</p>
													<p>@messages("repeatNameInfo", "data_1.txt")</p>
												</div>

											</div>

										</div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">
										@messages("RepeatVariablesAddSuffix") <span id="question5" style="margin-bottom: 5px">
										<a type="button" title=@messages("note") data-container="body" data-toggle="popover"
										data-placement="right" data-content="@messages("RepeatVariablesAddSuffixInfo")"
										data-trigger="click"><i class="fa fa-question-circle-o" ></i></a>
									</span>
										:</label>
									<div class="col-sm-8 toggling">
										<input id="logScale" type="checkbox" data-toggle="toggle" data-on="@messages("yes")" data-off="@messages("no")" checked
										class="fillByNameAndTrigger"
										name="varUniq" style="width: 100px" >
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("tag"):</label>
									<div class="col-sm-6">
										<div class="tag">

										</div>

									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("comment"):</label>
									<div class="col-sm-6">
										<textarea class="form-control" name="comment" rows="2"></textarea>
									</div>
								</div>

							</div>
						</div>

						<div class="modal-footer bg-info">
							<input type="hidden" id="ID" name="ID" />
							<button type="button" class="btn blue myAdd" >
							@messages("confirm")</button>
							<button type="button" class="btn green" data-dismiss="modal">
							@messages("cancel")</button>
						</div>
					</form>

				</div>
			</div>
		</div>

	</div>

	<div id="updateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		<div class="modal-dialog" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-edit"></i>
						<span id="lblAddTitle" style="font-weight: bold">@messages("modify")</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="updateForm" action="" data-toggle="validator">
					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="id" class="fillByName">
							<input hidden name="kind" class="fillByName">
							<input hidden name="originalFileName">

							<div class="form-group">
								<label class="control-label col-sm-3">@messages("fileName"):</label>
								<div class="col-sm-6">
									<div class="input-group">
										<input class="form-control fillByName" name="fileName" />
										<span class="input-group-addon">.txt</span>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-3">@messages("tag"):</label>
								<div class="col-sm-6">
									<div class="tag">

									</div>

								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-3">@messages("comment"):</label>
								<div class="col-sm-6">
									<textarea class="form-control fillByName" name="comment" rows="2"></textarea>
								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer bg-info">
						<input type="hidden" id="id" name="id" />
						<button type="button" class="btn blue myUpdate">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<div id="groupModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		<div class="modal-dialog" style="width: 850px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-group"></i>
						<span id="lblAddTitle" style="font-weight: bold">
							@{
								messages("newGroup")
							}(<span id="fileName"></span>)</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="groupForm" action="" data-toggle="validator">
					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="kind">

							<div class="form-group" style="padding-left: 15px">
								<label class="control-label col-sm-1" style="float: left">
									@messages("fileName"): </label>
								<div class="col-sm-4">
									<div class="input-group">
										<input class="form-control" name="fileName" value="test" onfocus="inputSelect(this)">
										<span class="input-group-addon">.txt</span>
									</div>
								</div>
								<label class="control-label col-sm-2">
									@{
										messages("paired")
									} <span style="margin-bottom: 5px">
									<a type="button" class="selfQuestion" title=@messages("note") data-container="body" data-toggle="popover"
									data-placement="right" data-html="true" data-content="@messages("pairedInfo")"
									><i class="fa fa-question-circle-o" ></i></a>
								</span>
									:</label>
								<div class="col-sm-2 toggling">
									<input id="logScale" type="checkbox" data-toggle="toggle" data-on="@messages("yes")" data-off="@messages("no")"
									class="myPaired fillByNameAndTrigger"
									name="isPaired" style="width: 100px">
								</div>
								<div class="actions col-sm-2">
									<button type="button" class="btn btn-default myAddGroup" title="@messages("add")" >
										<i class="fa fa-plus"></i>&nbsp;@{
										messages("addGroup")
									}
									</button>
								</div>
							</div>

							<hr style="margin-bottom: 10px">

							<div class="row" >
								<div class="col-sm-4">
									<div style=""> <span id="remainSampleNum"></span>
										/ <span id="totalSampleNum"></span></div>
									<select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple">

									</select>
								</div>

								<div class="col-sm-8" style="max-height: 709px;
									overflow-y: auto;
									margin-top: 20px">

									<div id="groups">


									</div>

								</div>


							</div>
						</div>
					</div>

					<div class="modal-footer bg-info">
						<input type="hidden" id="id" name="id" />
						<button type="button" class="btn blue myNewGroup">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<div id="subModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		<div class="modal-dialog" style="width: 850px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-columns"></i>
						<span id="lblAddTitle" style="font-weight: bold">
							@{
								messages("Submatrix")
							}(<span id="fileName"></span>)
						</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="subForm" action="">

					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="kind">

							<div class="form-group" style="padding-left: 15px">
								<label class="control-label" style="float: left">
									@messages("fileName"): </label>
								<div class="col-sm-4">
									<div class="input-group">
										<input class="form-control" name="fileName" value="" onfocus="inputSelect(this)">
										<span class="input-group-addon">.txt</span>
									</div>
								</div>
							</div>

							<hr>

							<div class="row" style="margin-right: 5px;
								margin-left: 5px">

								<div class="col-sm-6" id="left" style="border-right: 1px #F0F0F0 solid">
									<div class="row myEachGroup">
										<div class="col-sm-5" >
											<h4 class="myTitle">@{
												messages("OriginalRow")
											}(<span id="remainNum"></span>
												/ <span id="totalNum"></span>):</h4>
											<select name="oldRows[]" id="oldRows" class="form-control myLeft" size="26" multiple="multiple">
											</select>
										</div>

										<div class="col-sm-2" style="margin-top: 40px">
											<button type="button" class="btn btn-block myExtraVarInfoShow" title="@messages("connectVariableInformationFiles")"><i class="fa fa-info"></i></button>
											<button type="button" class="btn btn-block mySort" title="@messages("sort")"><i class="fa fa-sort-alpha-asc"></i></button>
											<button type="button" class="btn btn-block myMoveRightAll"><i class="glyphicon glyphicon-forward"></i></button>
											<button type="button" class="btn btn-block myMoveRight"><i class="glyphicon glyphicon-chevron-right"></i></button>
											<button type="button" class="btn btn-block myMoveLeft"><i class="glyphicon glyphicon-chevron-left"></i></button>
											<button type="button" class="btn btn-block myMoveLeftAll"><i class="glyphicon glyphicon-backward"></i></button>
											<button type="button" class="btn btn-block myReverseMove" title="@messages("counterElection")"><i class="fa fa-exchange"></i></button>
										</div>

										<span id="tmpExchange" style="display: none"></span>

										<div class="col-sm-5">
											<h4 class="myTitle">@{
												messages("RowsToBeExtracted")
											}(<span id="num">0</span>):</h4>
											<div class="form-group">
												<div class="col-sm-12">
													<select name="rows[]" class="form-control myRight" size="26" multiple="multiple"></select>
												</div>
											</div>
										</div>

									</div>

								</div>

								<div class="col-sm-6" id="right">
									<div class="row myEachGroup">

										<div class="col-sm-5">
											<h4 class="myTitle">@{
												messages("OriginalColumn")
											}(<span id="remainNum"></span>
												/ <span id="totalNum"></span>):</h4>
											<select name="oldCols[]" id="oldCols" class="form-control myLeft" size="26" multiple="multiple">

											</select>
										</div>

										<div class="col-sm-2" style="margin-top: 40px">
											<button type="button" class="btn btn-block myExtraGroupShow" title="@messages("connectGroupedFiles")"><i class="fa fa-group"></i></button>
											<button type="button" class="btn btn-block mySort" title="@messages("sort")"><i class="fa fa-sort-alpha-asc"></i></button>
											<button type="button" class="btn btn-block myMoveRightAll"><i class="glyphicon glyphicon-forward"></i></button>
											<button type="button" class="btn btn-block myMoveRight"><i class="glyphicon glyphicon-chevron-right"></i></button>
											<button type="button" class="btn btn-block myMoveLeft"><i class="glyphicon glyphicon-chevron-left"></i></button>
											<button type="button" class="btn btn-block myMoveLeftAll"><i class="glyphicon glyphicon-backward"></i></button>
											<button type="button" class="btn btn-block myReverseMove" title="@messages("counterElection")"><i class="fa fa-exchange"></i></button>
										</div>

										<div class="col-sm-5">
											<h4 class="myTitle">@{
												messages("columnsToBeExtracted")
											}(<span id="num">0</span>):</h4>
											<div class="form-group">
												<div class="col-sm-12">
													<select name="cols[]" class="form-control myRight" size="26" multiple="multiple"></select>
												</div>
											</div>
										</div>

									</div>
								</div>

							</div>
						</div>
					</div>

					<div class="modal-footer bg-info">
						<input type="hidden" id="id" name="id" />
						<button type="button" class="btn blue mySub">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>

			</div>
		</div>
	</div>

	<div id="extraGroupModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		<div class="modal-dialog" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-group"></i>
						<span id="lblAddTitle" style="font-weight: bold">
						@messages("connectGroupedFiles")
						</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="subForm" action="">

					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="file">

							<div class="form-group" style="display: block">
								<label class="control-label col-sm-2">@messages("groupFile"):</label>
								<div class="col-sm-4">
									<input class="form-control fillByName myFile myGroupFile" name="groupFile" value="" readonly>
								</div>
								<div class="col-sm-3">
									<button class="btn green myFileSelect" data-value="group" data-inputName="groupFile"
									data-dataInputName="file" type="button" data-fileName="group.txt" data-onlyInter="true" ><i class="fa fa-file"></i>
										@messages("selectFile")</button>
								</div>
							</div>

							<div class="form-group" style="display: none">
								<label class="control-label col-sm-2">@messages("selectColumn"):</label>
								<div class="col-sm-4">
									<select class="form-control fillByNameAndTrigger mySelectColumn" name="selectColumn" style="width: 100%">
									</select>
								</div>
							</div>

							<div class="form-group" style="display: none">
								<label class="control-label col-sm-2">@messages("selectGroup"):</label>
								<div class="col-sm-4">
									<select class="form-control fillByNameAndTrigger " name="selectGroup" style="width: 100%">
									</select>
								</div>
								<div class="col-sm-3">
									<button style="" class="btn green mySelectAll" id="menuBtn" type="button">
									@messages("selectAll")</button>
									<button style="" class="btn green myReverseSelect" id="menuBtn" type="button">
									@messages("counterElection")</button>
								</div>

							</div>


						</div>
					</div>

					<div class="modal-footer bg-info">
						<input type="hidden" id="id" name="id" />
						<button type="button" class="btn blue myExtraGroup">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>

			</div>
		</div>
	</div>

	<div id="extraVarInfoModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		<div class="modal-dialog" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-info"></i>
						<span id="lblAddTitle" style="font-weight: bold">
						@messages("connectVariableInformationFiles")
						</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="subForm" action="">

					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="originalMatrixFile">

							<div class="form-group" style="display: block">
								<label class="control-label col-sm-2">@messages("varInfoFile"):</label>
								<div class="col-sm-4">
									<input class="form-control fillByName myFile myGroupFile" name="varInfoFile" value="" readonly>
								</div>
								<div class="col-sm-3">
									<button class="btn green myFileSelect" data-value="@VarInfoDataKind.name" data-inputName="varInfoFile"
									data-dataInputName="originalMatrixFile" type="button" data-fileName="group.txt" data-onlyInter="true"><i class="fa fa-file"></i>
										@messages("selectFile")</button>
								</div>
							</div>

							<div class="form-group" style="display: none">
								<label class="control-label col-sm-2">@messages("selectColumn"):</label>
								<div class="col-sm-4">
									<select class="form-control fillByNameAndTrigger mySelectColumn" name="selectColumn" style="width: 100%">
									</select>
								</div>
							</div>

							<div class="form-group" style="display: none">
								<label class="control-label col-sm-2">@messages("selectGroup"):</label>
								<div class="col-sm-4">
									<select class="form-control fillByNameAndTrigger " name="selectGroup" style="width: 100%">
									</select>
								</div>
								<div class="col-sm-3">
									<button style="" class="btn green mySelectAll" id="menuBtn" type="button">
									@messages("selectAll")</button>
									<button style="" class="btn green myReverseSelect" id="menuBtn" type="button">
									@messages("counterElection")</button>
								</div>

							</div>


						</div>
					</div>

					<div class="modal-footer bg-info">
						<input type="hidden" id="id" name="id" />
						<button type="button" class="btn blue myExtraVarInfo">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>

			</div>
		</div>
	</div>

</div>
